<!--  -->
<template>
  <div>
    <el-container class="screening-box">
      <el-form
        :inline="true"
        class="form"
        ref="form"
        label-position="right"
        label-width="100px"
      >
        <el-header class="screening-head">
          <div class="title">
            <i class="el-icon-search el-icon--left"></i>筛选查询
          </div>
          <div>
            <span class="toggle" v-show="showScreening" @click="showScreening=!showScreening">
              <i class="el-icon-arrow-up el-icon--left"></i>收起筛选
            </span>
            <span class="toggle" v-show="!showScreening" @click="showScreening=!showScreening">
              <i class="el-icon-arrow-down el-icon--left"></i>展开筛选
            </span>
            <el-button
              class="tlwok-btn"
              type="primary"
              @click="search"
            >查询
            </el-button>
            <el-button class="tlwok-btn" type="primary" plain @click="reset">重置</el-button>
          </div>
        </el-header>
        <el-main class="screening-body" v-show="showScreening">
          <el-form-item label="提报编号：">
            <el-input v-model.trim="searchData.id" placeholder="请输入提报编号"></el-input>
          </el-form-item>
          <el-form-item label="用户账号：">
            <el-input v-model.trim="searchData.userName" placeholder="请输入用户账号"></el-input>
          </el-form-item>
          <el-form-item label="公司名称：">
            <el-input v-model.trim="searchData.companyName" placeholder="请输入公司名称"></el-input>
          </el-form-item>
          <el-form-item label="提交时间：">
            <el-date-picker
              class="filter-item"
              v-model="time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-main>
      </el-form>
    </el-container>
    <div class="table-box">
      <div class="table-title">
        <span class="title">
          <i class="el-icon-notebook-2 el-icon--left"></i>提报列表
        </span>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        border
        :header-cell-style="tableHeaderColor"
        :cell-style="tableCellStyle"
      >
        <el-table-column prop="id" label="提报编号"></el-table-column>
        <el-table-column label="提交时间">
            <template slot-scope="scope">{{scope.row.createTime | dateFilter}}</template>
        </el-table-column>
        <el-table-column prop="userName" label="用户账号"></el-table-column>
        <el-table-column prop="companyName" label="公司名称"></el-table-column>
        <el-table-column label="文件 （点击文件名下载）">
          <template slot-scope="scope">
            <el-link type="primary" :href="scope.row.fileUrl">{{scope.row.fileName}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="illustration" label="证书说明" >
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="150">
        </el-table-column>
      </el-table>
      <div class="table-handler" v-if="tableData.length>0">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.startPage"
          :page-sizes="pageInfo.pageSizeArr"
          :page-size="pageInfo.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
        ></el-pagination>
      </div>
    </div>



  </div>

</template>

<script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';
    import md5 from 'js-md5'

    export default {
        name: 'Project_list',
        //import引入的组件需要注入到对象中才能使用
        components: {},
        data() {
            //这里存放数据
            return {
                tableData: [],
                pageInfo: {
                    total: 0,
                    pageSizeArr: [10, 20, 30, 40],
                    size: 10, //分页页面数量大小
                    startPage: 1 //开始页码
                },
                time : [],
                showScreening: true,

                searchData :{
                    id : '',
                    userName : '',
                    companyName : '',
                    startTime : null,
                    endTime: null
                }



            }
        },

        mounted() {
            this.getList()
        },
        //方法集合
        methods: {

            search: function () {
                this.pageInfo = {
                    total: 0,
                    pageSizeArr: [10, 20, 30, 40],
                    size: 10, //分页页面数量大小
                    startPage: 1 //开始页码
                };
                this.getList()
            },
            reset: function() {
                this.time = []

                this.searchData.startTime = null
                this.searchData.endTime = null
                this.searchData.companyName = '';
                this.searchData.userName = ''
                this.searchData.id = ''
            },
            getList: function () {

                if(this.time && this.time.length > 0){
                    this.formatDate()
                    this.searchData.startTime = this.time[0]
                    this.searchData.endTime = this.time[1]
                }
                else {
                    this.searchData.startTime = null
                    this.searchData.endTime = null
                }

                this.$axios.post(
                    `/api/manage/qualification/getCommitList?size=${this.pageInfo.size}&startPage=${this.pageInfo.startPage}`,
                    this.searchData
                )
                    .then(res => {
                        if (res.success) {
                            this.pageInfo.total = res.result.total
                            this.pageInfo.size = res.result.pageSize
                            this.tableData = res.result.list
                        } else this.$message.error(res.desc)
                    })
            },
            // 分页数量大小设置
            handleSizeChange(val) {
                this.pageInfo.size = val
                this.pageInfo.startPage = 1
                this.getList()
            },
            // 分页当前页设置
            handleCurrentChange(val) {
                this.pageInfo.startPage = val
                this.getList()
            },
            // 修改table header的背景色
            tableHeaderColor({row, column, rowIndex, columnIndex}) {
                return 'background-color: #f5f5f5;color: #333;font-weight: bold;text-align:center'
            },
            // 修改table tr行的样式
            tableCellStyle({row, column, rowIndex, columnIndex}) {
                return 'text-align:center'
            },
        }
    }
</script>


<style lang="less" scoped>
  .title {
    font-weight: bold;
  }

  .grey {
    color: #bbb;
  }

  .red {
    color: red;
  }

  .screening-box {
    border: 1px solid #ddd;

    .form {
      width: 100%;
    }
  }

  .screening-head {
    background: #f5f5f5;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .toggle {
      cursor: pointer;
      margin-right: 50px;
    }
  }

  .screening-body {
    border-top: 1px solid #ddd;
  }

  .btn-box {
    margin-top: 40px;

    .number {
      color: red;
    }

    .el-button--primary {
      .number {
        color: #fff;
      }
    }
  }

  .table-title {
    height: 47px;
    line-height: 47px;
    padding: 0 15px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .filing-button {
      margin-left: 30px;
    }
  }

  .table-box {
    border: 1px solid #ddd;
    margin-top: 30px;

    .el-tag {
      margin: 2px;
      cursor: default;
    }
  }

  .table-handler {
    padding: 5px 15px;
    text-align: right;

    .check-all {
      margin-right: 20px;
    }
  }

  .hasEdit {
    position: absolute;
    top: 0;
    left: 0;

    &::before {
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-top: 30px solid red;
      border-right: 30px solid transparent;
    }

    .text {
      position: absolute;
      top: -3px;
      left: 2px;
      color: #fff;
      font-size: 12px;
    }
  }

  .user-info-form {
    .el-select,
    .el-input {
      width: 300px;
    }

    .tags {
      width: 450px;
    }

    .el-tag {
      cursor: pointer;
      margin-right: 15px;
    }
  }

  .tags-dialog {
    .el-tag {
      margin-right: 15px;
      margin-bottom: 15px;

      &:last-child {
        margin-right: 30px;
      }
    }

    .button-new-tag {
      margin-bottom: 15px;
      height: 32px;
      line-height: 30px;
      padding-top: 0;
      padding-bottom: 0;
      color: #5aa3e5;
      border-color: #bddaf5;
      background: #eff6fc;

      &:focus,
      &:hover {
        color: #fff;
        background: #5aa3e5;
        border-color: #5aa3e5;
      }
    }

    .input-new-tag {
      width: 90px;
      margin-bottom: 15px;
      vertical-align: bottom;
    }
  }

  .upload-box {
    display: inline-block;
  }
</style>
<style>
  .input-new-tag .el-input__inner:focus {
    border-color: #bddaf5;
  }

  .el-tree-node > .el-tree-node__children .el-tree-node {
    width: 33%;
  }

  .el-tree-node > .el-tree-node__children {
    display: flex !important;
    flex-wrap: wrap;
  }

  .el-tree-node__label {
    padding-left: 5px;
  }
</style>
